<template>
    <ui-main>
        <div class="p20 bg-grey">
            <section class="flex row-center mb50">
                <el-button-group>
                    <el-button v-for="(item,i) in tabList" :key="item.title" :type="item.isActive?'primary':'default'" @click="tabChange(i)" class="ui-button-tab">{{item.title}}</el-button>
                </el-button-group>
            </section>

            <div class="flex">
                <section style="width:926px;" class="mr20">
                    <!-- 测评列表 -->
                    <div v-for="item in dataList" @click="goDetails(item.company_id)" class="flex bg-white p20 ui-border-bottom">
                        <div class="p20 pl40 pr40 ui-border-right mr50 text-center">
                            <ui-img :url="item.logo" size="70px" class="ui-circle mb10 ui-border"></ui-img>
                            <div class="f20 clamp-1 mb10" style="width:150px">{{item.name}}</div>
                            <div class="f14 f-color-grey">Since {{item.setup_time}}</div>
                        </div>
                        <div class="flex-1 flex column column-col-center">
                            <div class="f18 f-color-orange">{{item.pass}}项及格 {{item.nopass}}项不及格</div>
                            <div class="flex col-center mt25 mb25">
                                <el-progress :percentage="50" :show-text="false" :stroke-width="9" style="width:240px"></el-progress>
                                <span class="ml25">{{currentTabType}}高于同行{{parseFloat(item.good_percent*100).toFixed(2)}}%</span>
                            </div>
                            <div class="mb20">
                                <span class="ui-tag-primary mr15">优点</span>
                                <span class="f-color-text">{{item.change_good}}</span>
                            </div>
                            <div>
                                <span class="ui-tag-grey mr15">缺点</span>
                                <span class="f-color-text">{{item.change_bad}}</span>
                            </div>
                        </div>
                        <div class="mr30">
                            <ui-echarts :option="echartPie(parseFloat(item.score))" width="100px" height="100px"></ui-echarts>
                            <div class="text-center">
                                <div class="f21 f-color-orange mb5">{{parseFloat(item.score).toFixed(2)}}</div>
                                <div class="f-color-text">菠菜指数</div>
                            </div>
                        </div>
                    </div>

                    <!-- 分页 -->
                    <div class="text-center mt15">
                        <el-pagination
                        @current-change="fetchList"
                        :current-page.sync="pageCurrent"
                        :page-size="pageSize"
                        layout="prev, pager, next, jumper"
                        :total="pageTotal">
                        </el-pagination>
                    </div>
                </section>

                <rightSide></rightSide>
            </div>

        </div>
    </ui-main>

</template>

<script>
    import rightSide from './列表页右侧.vue'
    import tabList from './tabList'
    export default {
        components:{
            rightSide
        },
        data(){
            return {
                tabList: tabList,
                dataList:[],
                pageCurrent:1,
                pageSize:10,
                pageTotal:0,
                currentTabType:''
            }
        },
        methods:{
            echartPie(value=0){
                const colors = ['#ff6c00', '#eee'];
                return {
                    colors: colors,
                    series: [
                        {
                            data: [
                                { value: value, name: '' },
                                { value: 100-value, name: '' },
                            ],
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            hoverAnimation: false,
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        return colors[params.dataIndex];
                                    },
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                        }
                    ]
                }
            },
            tabChange(index){
                // 点亮按钮
                this.tabList.forEach((item) => {
                    item.isActive=false
                })
                this.tabList[index].isActive = true
                this.currentTabType = this.tabList[index].subTitle

                // 最新类型
                if (this.tabList[index].title==='最新') {
                    this.$router.push('/cepin')
                    return
                }

                // 记录当前tab分类到url-query
                this.$router.replace({
                    path:this.$route.path,
                    query:{
                        tab: index
                    }
                })

                // 当前分页重置
                this.pageCurrent = 1

                // 查询列表
                this.fetchList()
            },
            goDetails(id){
                this.$router.push({
                    name:'测评详情',
                    query:{
                        id:id
                    }
                })
            },
            fetchList(){//更新列表数据
                // 获取当前点亮的tab名称
                let tab
                this.tabList.forEach((item)=>{
                    if (item.isActive) {
                        tab = item
                    }
                })
                // 查询数据
                if (tab.nodeId) {
                    // 产品、运营、硬件、客服
                    this.$http.get('index.php?g=home&m=paperRecord&a=company_list2&paper_id=13', {
                        params:{
                            page_size:this.pageSize,
                            node_id: tab.nodeId // 136 默认 137 运营 138 硬件 139 客服
                        }
                    })
                    .then(({data})=>{
                        console.log(tab.title,data);
                        if (data.code===1) {
                            this.dataList = data.data
                            this.pageTotal = data.total
                        }
                    })

                }else{
                    this.$http.get('index.php?g=home&m=paperRecord&a=company_list&paper_id=13&order_field=score', {
                        params:{
                            page_size: this.pageSize,
                            page_no: this.pageCurrent
                        }
                    })
                    .then(({data})=>{
                        // console.log('综合实力',data);
                        if (data.code===1) {
                            this.dataList = data.data
                            this.pageTotal = data.total
                        }
                    })
                }
            }
        },
        mounted(){
            let tabIndex = this.$route.query.tab
            if (tabIndex) {
                this.tabChange(tabIndex)
            }else{
                this.fetchList()
            }
        },
    }
</script>
